<template>
  <div class="content_wrap">
    <Header />
    <div class="content_detail">
      <div class="header">
        <h1> {{detailObj.title}}</h1>
        <div class="timer_wrap">
          发布日期：<span class="data_fabu">{{detailObj.createdAt || detailObj.updatedAt}} </span> 来源：<span>{{detailObj.sourceInfo}}</span>
        </div>
      </div>
      <div class="content">
        <!-- <div class="img_top">
        <img :src="detailObj.imageUrl" alt="">
      </div> -->
        <div class="content_artile" v-html="detailObj.content">
          2020年春节前夕，来势汹汹的新型冠状病毒打乱了所有人的工作生活节奏，为了赢得这场与病毒较量、控制疫情扩散的战斗，南昌市12345政府服务热线运营中心打破常规，几次调整班务增加备员，疏导话务确保接通，中心领导及重点岗位人员提前取消春节休假，党员干部身先士卒，哪里需要就到哪里，积极投入到紧张的疫情阻击战中。电话就是险情，电话就是使命，电话就是担当，在此特殊时期，12345热线更是市民的信任和希望。

          自1月22日至1月29日，12345热线共受理市民诉求1万余件，其中涉及肺炎疫情的共4600余件，占比近50%。对于紧急类的诉求，如：疫情管控问题，一级平台立即电话联系二级成员单位，要求2小时内响应；对于市民对疫情担忧，话务员根据知识库予以专业的解释宽慰；对于防控物资价格问题，一级平台转派相关属地查处及时跟进处理情况；相当一部份市民给出了延长休假、关停大型商场等防控的建议，热线平台也及时转达给了专业部门商议。12345热线很好地承担了作为政府与市民的桥梁作用。

          疫情就是战况，为了给防疫工作及领导决策提供详实的数据参考，12345热线自疫情电话增多即开始编制“新冠肺炎疫情舆情专报”，每日一报，将热线受理的市民诉求分类整理，回应市民关切的热点、疑难问题。黄喜忠市长及杨文斌副市长均作出重要批示，要求相关部门结合日报中的具体问题，有针对性地加强防控工作。

          为了打赢这场没有硝烟的战役，热线人坚决不能倒下，一方面运营中心制订了严格的卫生防疫制度，另一方面，在口罩、酒精、消毒液等防护装备奇缺的困难面前，热线员工自发地从家里带来酒精给员工重复利用的口罩消毒，每天坚持测体温，从自己做起，休息时不窜门、不外出。

          面对疫情，12345热线全体工作人员信心满满，绝不退缩，全力以赴做好市民诉求承接工作，与南昌市民共度难关。

          抗击疫情，12345热线与您同在！
        </div>
      </div>
      <!-- 评论模块 -->
      <div class="comment" v-if="flagShow">
        <div class="write_comment">
          <!-- <el-image style="width: 30px; height: 30px" :src="url" fit="fill">
          </el-image> -->
          <el-input ref="area" type="textarea" v-model="wirte_value" placeholder="请输入评论" :maxlength="commitNum"></el-input>
        </div>
        <div class="commit_btn">
          <span>还能输入{{commitNum - wirte_value.length}}个字符</span>
          <el-button type="danger" size="mini" @click="handleInputFocus">发表评论</el-button>
        </div>
        <div class="commit_show">
          <!-- 一级评论 -->
          <div v-for="(item,index) in commentList" :key="item.articleId+index">
            <div class="commit_show_first">
              <div class="first_left">
                <!-- <el-image style="width: 25px; height: 25px" :src="item.userName"  fit="fill">
                </el-image> -->
                <span class="left_name">{{item.userName ? item.userName :'默认名'}}:</span> <span class="commit_content_right">{{item.content}}</span>
                <span class="left_time">创建时间 {{(new Date( item.createTime )).toLocaleString()}}</span>
              </div>
              <div class="first_right">
                <el-button @click="FnReplyComment(item.id,item)" size="mini" icon="el-icon-top-left">回复</el-button>
              </div>
            </div>
            <!-- 二级评论 -->
            <div v-if="item.replyList != 0 ">
              <div class="commit_show_second" v-for="(e,i) in item.replyList" :key="e+i">
                <div class="show_second_left">
                  <!-- <el-image style="width: 20px; height: 20px" :src="e.userName" fit="fill">
                  </el-image> -->
                  <span class="second_username">{{e.userName ? e.userName : '默认名'}}:</span><span class="reply">回复</span>
                  <span class="second_username">{{item.userName? item.userName :'默认名'}} <span class="commit_content_second"> {{e.content}}</span> </span>
                  <span class="reply">回复时间 {{(new Date( e.createTime )).toLocaleString()}}</span>
                </div>
                <div class="show_second_btn">
                  <el-button @click="FnReplyCommentbottom(e.id,e.pid)" size="mini" icon="el-icon-top-left">回复</el-button>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="block_pag" >
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="pageSize" layout="prev, pager, next, jumper" :total="totalNum">
          </el-pagination>
        </div>
      </div>
    </div>
    <Footer />
  </div>

</template>

<script>
import { queryById, queryByBizType, sendComment, replyComment, getCommentPage } from '@/api/user'

import Header from "~/components/Header.vue";
import Footer from "~/components/Footer.vue";
import { number } from 'echarts/lib/export';
export default {
  components: { Header, Footer },


  data() {
    return {
      //详情id
      id: this.$route.query.id,
      platformInfo: this.$route.query.bizType,
      token: '',
      pageNum: 1,
      pageSize: 5,

      totalNum: 0,
      commentList: [

      ], //评论列表
      // 文章对象
      detailObj: {
        title: ''
      },
      wirte_value: '', //评论值
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      url1: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      commitNum: 200,
      commentType: false,  // false 发布评论，true回复评论
      commentTypebotton: false,
      firstId: '', //一级评论id
      commentId: '', //评论数据id 
      compid: '', //上传id 
      commentbotId: '', // 二级id 
      
      flagShow:true,

    }
  },
   
  //  watch: {
  //   $route(to, from) {
  //      console.log(to);
  //      console.log(from);
  //   },
  // },

  mounted() {
    this.fngetCommentPage()
    this.token = sessionStorage.getItem('token')

    if (this.id) {
      this.getdetailData()
    }
    if (this.platformInfo) { 
    
      if(this.platformInfo == 'platformInfo'){
          this.flagShow = false
      }
      this.getList()
    }

    //this.getSwperData()
  },
  methods: {
    async getdetailData() {
      let res = await queryById({
        id: this.id
      })
      if (res && res.code == 0) {
      

        this.detailObj = res.data
      }

    },
    async getList() {
      let res = await queryByBizType({
        bizType: this.platformInfo
      })
      console.log(res)
      this.detailObj = res.data[0]
    },
    // 输入框得到焦点 发布评论
    async handleInputFocus() {
      if (this.token) {
        if (this.wirte_value == '') {
          this.$refs.area.focus()
        } else {
          if (this.commentType) {
            this.FnReplyComment(this.commentId, this.firstId)
          } else if (this.commentTypebotton) {
            this.FnReplyCommentbottom(this.commentbotId, this.compid)
          }
          else {
            console.log(11);
            let res = await sendComment({
              articleId: this.id,
              content: this.wirte_value
            })
            if (res.code == 0 && res.state == 200) {
              this.wirte_value = ''
              return this.$message.success(res.data)
              this.fngetCommentPage()
            }
          }

        }
      } else {
        this.$message.warning('未登录,请先登录')
        this.$router.push({
          path: '/login'
        })
      }


    },

    //分页查询评论列表
    async fngetCommentPage() {
      let res = await getCommentPage({
        articleId: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })

      if (res && res.code == 0) {

        this.commentList = res.data.list
        this.totalNum = Number(res.data.total)
        console.log(this.commentList);
      }

    },
    //回复评论 
    async FnReplyComment(id, val) {
      if (this.token) {
        if (this.wirte_value == '') {
          this.$refs.area.focus()
          this.commentType = true
          this.commentId = id
          this.firstId = val
          this
        } else {
          console.log(val);
          let res = await replyComment({
            articleId: this.id,
            content: this.wirte_value,
            pid: id,
            commentId: id

          })
          console.log(res);
          if (res && res.code == 0) {
            this.wirte_value = ''
            this.$message.success(res.data)
            this.fngetCommentPage()
            this.commentType = false
          }

        }
      }

    },

    //回复二级 
    async FnReplyCommentbottom(id, pid) {
      if (this.token) {
        if (this.wirte_value == '') {
          this.$refs.area.focus()
          this.commentTypebotton = true
          this.commentbotId = id
          this.compid = pid
        } else {

          let res = await replyComment({
            articleId: this.id,
            content: this.wirte_value,
            pid: id,  //
            commentId: pid //上层id

          })
          console.log(res);
          if (res && res.code == 0) {
            this.wirte_value = ''
            this.$message.success(res.data)
            this.fngetCommentPage()
            this.commentType = false
          }

        }
      }
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.fngetCommentPage()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fngetCommentPage()
    },

  },
  head() {
    return {
      title: this.$route.query.title,
      meta: [
        { hid: '吉安12345政府服务热线', name: '吉安12345政府服务热线', content: '吉安12345政府服务热线' }
      ],
    }
  }
}

</script>

<style scoped lang="scss">
.content_wrap {
  width: 100%;
  margin: 0 auto;
  .content_detail {
    width: 1200px;
    margin: 20px auto;
  }
}
.comment {
  padding: 20px;

  border-top: 2px solid #1b1a20;
  
  .write_comment {
    height: 60px;
    display: flex;
    align-items: center;
  }
  .commit_btn {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 12px;
    color: #a1a1a1;
    height: 30px;
    span {
      margin-right: 10px;
    }
  }
  .commit_show {
    margin-top: 20px;
    .commit_show_first {
      margin-bottom: 10px;
      margin-top: 10px;
      display: flex;
       justify-content: space-between;
      align-items: center;
      .first_left {
      
        display: flex;
       
        align-items: center;
        .commit_content_right {
    display: inline-block;
    // width: 50%;
    margin: 0 10px;
     word-wrap:break-word;
  }
        .left_name {
          color: #999;
        }
        .left_time {
          color: #999;
          font-size: 12px;
          display: inline-block;
          margin-left: 20px;
        }
      }
    }
    .commit_show_second {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 30px;
      margin-top: 10px;
      .show_second_left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .commit_content_second {
          margin: 0 10px;
        }
        .second_username {
          color: #55567f;
          margin: 0 10px;
        }
        .reply {
          font-size: 13px;
          color: #a1a1a1;
        }
      }
    }
  }
  .block_pag {
    margin-top: 100px;
  }
}
.wrapper {
  margin: 0 auto;
  width: 1022px;
  height: auto;
  overflow: hidden;
  border: solid 1px #dedede;
  margin-top: 30px;
}
.header {
  text-align: center;
  border-bottom: solid 1px #dedede;
  margin-bottom: 20px;
}
.timer_wrap {
  color: #a1a1a1;
  font-size: 14px;
  margin-top: 10px;
}
.data_fabu {
  display: inline-block;
  margin-right: 15px;
}
.content_artile {
  padding: 0 10px;
  margin-bottom: 0.0001pt;
  text-indent: 32pt;
  line-height: 32pt;
  text-align: center;
}
.img_top {
  margin-bottom: 0.0001pt;
  text-indent: 32pt;
  line-height: 32pt;
  text-align: center;
}

.el-image {
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
</style>
